<template>
    <div>
        <h2>产品月销</h2>
        <div class="chart" id="c2">

        </div>
    </div>
</template>

<script>
import { inject, onMounted, reactive } from "vue"
export default {
    setup(){
        let $echarts = inject("echarts")
        let $http = inject("axios")
        let data = reactive({

        })
        async function getState() {
            data = await $http({ url: "/2/data" })
        }
        onMounted(() => {
            getState().then(() => {
                let chart = $echarts.init(document.getElementById("c2"))
                chart.setOption({
                    tooltip:{
                        trigger:"axis",
                        axisPointer:{
                            type:"cross",
                            label:{
                                backgroundColor:"#e6b600"
                            }
                        }
                    },
                    legend:{
                        data:["日化","服饰","数码","家电","家具"]
                    },
                    grid:{
                        left:"1%",
                        right:"4%",
                        bottom:"3%",
                        containLabel:true
                    },
            
                    xAxis:{
                        axisLabel: {
                            textStyle: {
                                color: "#ffffff"
                            }
                        },
                        boundaryGap:false,
                        type:"category",
                        data:data.data.chartData.chartData.day
                    },
                    yAxis:{
                        type:"value",
                        axisLabel: {
                            textStyle: {
                                color: "#ffffff"
                            }
                        },
                    },
                    series:[
                        {
                            smooth:true,
                            showSymbol:false,
                            stack:"total",
                            lineStyle:{
                                width:0
                            },
                            emphasis:{
                                focus:"series"
                            },
                            areaStyle:{
                                opacity:0.8,
                                color:new $echarts.graphic.LinearGradient(0,0,0,1,[
                                    {
                                        offset:0,
                                        color:"rgb(128,255,165)"
                                    },
                                    {
                                        offset: 1,
                                        color: "rgb(1,191,236)"
                                    }
                                ])                        
                            },
                            name: "日化",
                            type: "line",
                            data: data.data.chartData.chartData.num.chemicals
                        },
                        {
                            smooth: true,
                            showSymbol: false,
                            stack: "total",
                            lineStyle: {
                                width: 0
                            },
                            emphasis: {
                                focus: "series"
                            },
                            areaStyle: {
                                opacity: 0.8,
                                color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "rgb(0,221,255)"
                                    },
                                    {
                                        offset: 1,
                                        color: "rgb(77,119,255)"
                                    }
                                ])
                            },
                            name: "服饰",
                            type: "line",
                            data: data.data.chartData.chartData.num.clothes
                        },
                        {
                            smooth: true,
                            showSymbol: false,
                            stack: "total",
                            lineStyle: {
                                width: 0
                            },
                            emphasis: {
                                focus: "series"
                            },
                            areaStyle: {
                                opacity: 0.8,
                                color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "rgb(55,172,255)"
                                    },
                                    {
                                        offset: 1,
                                        color: "rgb(117,21,218)"
                                    }
                                ])
                            },
                            name: "数码",
                            type: "line",
                            data: data.data.chartData.chartData.num.digit
                        },
                        {
                            smooth: true,
                            showSymbol: false,
                            stack: "total",
                            lineStyle: {
                                width: 0
                            },
                            emphasis: {
                                focus: "series"
                            },
                            areaStyle: {
                                opacity: 0.8,
                                color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "rgb(255,0,135)"
                                    },
                                    {
                                        offset: 1,
                                        color: "rgb(135,0,157)"
                                    }
                                ])
                            },
                            name: "家电",
                            type: "line",
                            data: data.data.chartData.chartData.num.electrical
                        },
                        {
                            smooth: true,
                            showSymbol: false,
                            stack: "total",
                            lineStyle: {
                                width: 0
                            },
                            emphasis: {
                                focus: "series"
                            },
                            areaStyle: {
                                opacity: 0.8,
                                color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "rgb(255,191,0)"
                                    },
                                    {
                                        offset: 1,
                                        color: "rgb(224,72,73)"
                                    }
                                ])
                            },
                            name: "家具",
                            type: "line",
                            data: data.data.chartData.chartData.num.gear
                        }
                    ]
                })
            })
        })
        return{
            data, getState
        }
    }

}
</script>

<style lang="less" scoped>
.chart {
            height: 4.5rem;
        }
    
        h2 {
            height: 0.6rem;
            color: #fff;
            line-height: 0.6rem;
            font-size: 0.25rem;
            text-align: center;
        }
</style>